<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-category">
      <div class="tabs">
        <a class="item"  v-for="(item,index) in cateList" :class="{active:index === tabInx}" :key="index" @click="settabInx(index)">{{item.name}}</a>
      </div>
      <scroll-view class="tab-box" :style="{'height':winH+'px','width':'575rpx'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" :scroll-top="scrollTop">
          <ul class="ga-group-list ga-media-list">
            <li v-for="(item,index) in list" :key="index">
              <a class="item" :href="'../shopDetail/main?id='+item.id">
                <div class="item-media">
                  <image class="img-box" mode="aspectFill" :src="item.icon"></image>
                </div>
                <div class="item-inner">
                  <p class="title">{{item.goods_name}}</p>
                  <p class="p1"></p>
                  <div style="position: relative;">
                    <p class="p3">
                      <span>¥ {{item.market_price}}</span>
                      ¥ {{item.shop_price}}
                    </p>
                    <div class="cart"></div>
                  </div>
                </div>
              </a>
            </li>
          </ul>
      </scroll-view>
    </div>
  </div>
</template>
<script>
import {isLogin} from '@/utils/handleLogin'
export default {
  data () {
    return {
      cateList: [],
      tabInx: false,
      list: [],
      limit:9999,
      category_id: '',
      isSet: false,
      scrollTop: 0,
      winH: 0
    }
  },
  methods: {
    /** 接口数据 */
    async load () {
      /*商品分类*/
      this.$_util.ajax.get('https://guo-a.com/mapi/product/categorylist').then((res) => {
        if (res.code === 200) {
          this.cateList = res.data
        }
      })
      /*全部商品*/
      this.$_util.ajax.post('https://guo-a.com/mapi/product/productlist',{limit: this.limit}).then((res) => {
        if(res.code === 200){
            this.list = res.data
        }
      })
    },
    async getgoodslist (quck=false) {
        let params = {
           limit: this.limit,
           category_id: this.category_id
        }
       this.$_util.ajax.post('https://guo-a.com/mapi/product/productlist',params).then((res) =>{
          if(res.code ===200){
            let lists=res.data;
            if(quck){
              this.list = lists
            }else{
              this.list = this.list.concat(lists)

            }

          }
       })
    },
    async settabInx (index) {
      if(this.tabInx === index){
        return false
      }
      this.tabInx = index
      this.category_id = this.cateList[index]['id']
      this.scrollTop = 0
      this.getgoodslist(true)
    },
    async scrolltolower(){
      console.log('eee')
      // this.getgoodslist(false)
    },
    scroll(e) {
       console.log(e)
      // console.log(e.mp.detail.scrollTop)
      // this.scrollTop = e.mp.detail.scrollTop
      // this.scrollTop = e.target.scrollTop
      // this.ssscrollTop = e.target.scrollTop
    }
  },

  created () {
    // this.winH = 200 * this.limit
    // console.log(this.limit)
    // console.log(this.winH)
     // this.load()
     wx.getSystemInfo({
        success: ( res ) => {
          console.log(res)
          this.wind = res.windowWidth
          this.winH = res.windowHeight
        }
      })
  },
  onShow () {


  },
  onLoad () {
    
  },
  mounted () {
    this.load()
    // this.load()
    // this.load()
  }
}
</script>

